<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { shengcibenApi, endWorldStudyApi } from '../../api/request.js';
import { includeListGetItem } from '../../utils/index.js';
const props = defineProps({});
onMounted(() => {});
let platform = uni.getStorageSync('platform');
// 1美 2英
const type = ref(2);
const goback = async () => {
    uni.navigateBack();
};
const query = ref({
    word_ids: '',
    hui: '',
    index: 0
});
const list = ref([]);
onLoad(async (e) => {
    query.value.words = e.id;
    console.log(query.value);
});
onShow(async () => {
    if (uni.getStorageSync('bofangmoshi')) {
        type.value = uni.getStorageSync('bofangmoshi');
    }
    let res = await shengcibenApi(query.value);
    list.value = res.data;
    console.log(list.value);
});
onHide(() => {
    uni.$emit('pause');
});
onUnload(() => {
    uni.$emit('pause');
});
const playIndex = ref(-1);
const shunxu = ref(false);
const changePlayAudio = () => {
    if (playIndex.value == 4) shunxu.value = true;
    if (playIndex.value == 0) shunxu.value = false;
    if (shunxu.value) {
        playIndex.value -= 1;
    } else {
        playIndex.value += 1;
    }
    let item = list.value[query.value.index * 5 + playIndex.value];
    playAudio(item.id, item.audio_file_name.word);
};
const onclick = (e) => {
    let index = query.value.index * 5 + e.index;
    if (e.item.action == '1') {
        // 拓展
        uni.navigateTo({
            url: '/pages/common/tuozhan?id=' + list.value[index].word
        });
    } else if (e.item.action == '2') {
        // 拼读
        uni.navigateTo({
            url: '/pages/common/pindu?id=' + list.value[index].word
        });
    } else {
        // 纠错
        // 手机摄像头拍照
    }
};
const btnGroup = ref([
    {
        name: '拓展',
        action: '1',
        style: {
            fontSize: '32rpx',
            width: '144rpx',
            height: '52rpx',
            color: '#fff',
            bgColor: '#29B6FC'
        }
    },
    {
        name: '拼读',
        action: '2',
        style: {
            fontSize: '32rpx',
            width: '144rpx',
            height: '52rpx',
            color: '#fff',
            bgColor: '#FA862C'
        }
    },
    {
        name: '纠错',
        action: '3',
        style: {
            fontSize: '32rpx',
            width: '144rpx',
            height: '52rpx',
            color: '#fff',
            bgColor: '#668CFF'
        }
    }
]);
const select = ref('');
const changeSelect = (e) => {
    select.value = e;
};

const center = ref(null);
const change = (index) => {
    if (index == 2) {
        center.value.open('center');
    }
};
const last = () => {
    query.value.index = query.value.index == 0 ? 0 : query.value.index - 1;
    playIndex.value = -1;
    shunxu.value = false;
};
const next = () => {
    playIndex.value = -1;
    query.value.index =
        query.value.index == Math.ceil(list.value.length / 5) - 1
            ? list.value.length / 5 - 1
            : query.value.index + 1;
    shunxu.value = false;
};
//最后点击的是谁
const nowIndex = ref(null);
//被点击过都在里面
const getIdList = ref([]);
//点击过是第几次点击
const statusList = ref({});
const playAudio = (id, url, status = false) => {
    let http =
        type.value == 1
            ? 'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/'
            : 'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
    console.log(`https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/${url}`);
    uni.$emit('playAudio', http + `${url}`, true);
    nowIndex.value = id;
    //剪纸盒子的骡子
    const indexs = getIdList.value.findIndex((item) => item == id);
    if (indexs == -1) {
        getIdList.value.push(id);
    }
    const index = statusList.value.id == id;
    if (!index) {
        statusList.value.id = id;
        statusList.value.status = 1;
        dianjihaishizuohua.value = status;
    } else {
        statusList.value.status =
            statusList.value.status == 1
                ? 2
                : statusList.value.status == 2
                ? 3
                : statusList.value.status == 3
                ? 1
                : 1;
    }
};

const dianjihaishizuohua = ref(false);
const returnItemClassStatus = (id) => {
    //第一种情况
    if (nowIndex.value) {
        //第二种情况存在
        let index = includeListGetItem(getIdList.value, id);
        if (index == -1) {
            return 'none';
        } else {
            // 第三种 展示音标
            const zhege = statusList.value.id == id;
            if (zhege) {
                let num = statusList.value.status;
                //第一次点击
                if (num == 1) {
                    if (!dianjihaishizuohua.value) {
                        return 'heide';
                    } else {
                        return 'yinbiaos';
                    }
                    //第二次点击
                } else if (num == 2) {
                    if (!dianjihaishizuohua.value) {
                        return 'heides';
                    } else {
                        return 'fanyi';
                    }
                } else if (num == 3) {
                    // 说明是第三次
                    return 'kong';
                } else if (num == 4) {
                    if (!dianjihaishizuohua.value) {
                        return 'heide';
                    } else {
                        return 'yinbiaos';
                    }
                    // 说明还是你
                } else if (nowIndex.value == id) {
                    if (!dianjihaishizuohua.value) {
                        return 'heide';
                    } else {
                        return 'yinbiaos';
                    }
                } else {
                    return 'daiyanse';
                }
            } else {
                // return 'zhanshi';
                return 'none';
            }
        }
    } else {
        //黑 谁都没有过 最开始的样子
        return 'none';
    }
};
const returnStatus = (id) => {
    const index = statusList.value.id == id;
    if (index) {
        const status = statusList.value.status;
        if (status === 1) {
            return 'buyaoyinbiao';
        } else if (status === 2) {
            return 'active';
        } else if (status === 3) {
            return 'zheli';
        }
    }
    return '';
};
const startValue = ref(0);
const endValue = ref(0);
const minDistance = 60;
const handleTouchStart = (event) => {
    startValue.value = event.touches[0].clientX;
};
const touchend = (event) => {
    if (startValue.value == 0) {
        return;
    }
    endValue.value = event.changedTouches[0].clientX;
    let distance;
    distance = endValue.value - startValue.value;
    if (distance < minDistance) {
        return;
    } else {
        const item = list.value.find((item) => item.id == event.currentTarget.id);
        console.log(item);
        statusList.value = {};
        playAudio(item.id, item.audio_file_name.word, true);
    }
};
</script>

<template>
    <view
        class="wrap"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 单词识记 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <view class="body" v-if="list && list.length">
            <view
                class="item uni-row"
                :id="item.id"
                @touchstart="handleTouchStart"
                @touchend="touchend"
                v-for="(item, index) in list.slice(query.index * 5, (query.index + 1) * 5)"
                :key="index"
                :class="returnItemClassStatus(item.id)"
                @click="playAudio(item.id, item.audio_file_name.word)"
                :style="{ height: (platform.gaodu - platform.dingbu - 96 - 160) / 5 + 'rpx' }"
            >
                <next-swipe-action
                    :btnGroup="btnGroup"
                    :index="index"
                    @btnClick="onclick"
                    :select="select"
                    @changeSelect="changeSelect"
                >
                    <view
                        class="uni-row nei"
                        :style="{
                            height: (platform.gaodu - platform.dingbu - 96 - 160) / 5 + 'rpx'
                        }"
                    >
                        <view class="lefts">
                            <view class="uni-row fa" v-if="item">
                                <view
                                    class="left yingwen"
                                    v-for="(i, iIndex) in item.s_split"
                                    :key="index"
                                    :class="iIndex % 2 == 0 ? 'actives' : 'defaults'"
                                >
                                    {{ Object.keys(i)[0] }}
                                </view>
                            </view>
                            <view class="center yinbiao uni-row">
                                {{ type == 1 ? '美' : '英' }} :
                                <view
                                    class="yinbiao"
                                    v-for="(item, index) in item.tran_memo"
                                    :key="index"
                                >
                                    {{ item }}
                                </view>
                            </view>
                        </view>
                        <view class="fanti">
                            {{ item.youdao_api.translation[0] }}
                        </view>
                    </view>
                </next-swipe-action>
            </view>
        </view>
        <view class="nothing" v-if="list && list.length < 1">
            <image src="/static/img/nothing.png" class="img"></image>
            <view class="label"> 哎呀，这里什么内容都没有 </view>
        </view>
    </view>
    <image
        src="/static/img/laba.png"
        mode="widthFix"
        class="shengyin"
        @click="changePlayAudio"
    ></image>
    <view class="footers uni-row" v-if="list.length > 5">
        <view class="icon uni-row" @click="last">
            <image src="/static/img/wolrd/last.png" class="last"></image>
        </view>
        <view class="liang"> {{ query.index + 1 }} / {{ Math.ceil(list.length / 5) }} </view>
        <view class="icon uni-row" @click="next">
            <image src="/static/img/wolrd/next.png" class="next"></image>
        </view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .body {
        // padding: 0 28rpx;

        .item {
            height: 196rpx;
            // margin-bottom: 16rpx;
            // border-radius: 8rpx;
            overflow: hidden;
            background-color: #fff;
            border-bottom: 1rpx solid #bcbcbc;

            .nei {
                // height: 196rpx;
                width: 100%;
                padding: 0 28rpx;
                justify-content: space-between;
                border-radius: 8rpx;
                font-size: 42rpx;

                .lefts {
                    .center {
                        display: none;
                        font-size: 22rpx;
                        color: #999999;
                    }
                }

                .fanti {
                    font-size: 28rpx;
                    color: #333333;
                    opacity: 0;
                    transition: 0.2s all;
                }
            }

            &.heide {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }
            }

            &.heides {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;
                        }
                    }
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.yinbiaos {
                .lefts {
                    .fa {
                        .left {
                            font-weight: 600;
                            font-size: 50rpx;

                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }

                    .center {
                        display: flex;
                    }
                }
            }

            &.fanyi {
                .lefts {
                    .fa {
                        .left {
                            font-size: 50rpx;
                            font-weight: 600;

                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }

                    .center {
                        display: flex;
                    }
                }

                .fanti {
                    opacity: 1;
                }
            }

            &.kong {
                .nei {
                    opacity: 0;
                }
            }

            &.cu {
                .lefts {
                    .fa {
                        .left {
                            font-size: 50rpx;
                            font-weight: 600;

                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }
                }
            }

            &.zhanshi {
                .lefts {
                    .fa {
                        .left {
                            &.actives {
                                color: #222868;
                            }

                            &.defaults {
                                color: #fa862c;
                            }
                        }
                    }
                }
            }
        }

        .btn-area {
            .btn-item {
                justify-content: center;
                width: 148rpx;
                height: 116rpx;
                color: #fff;
                font-size: 32rpx;

                &.active {
                    background: #29b6fc;
                }

                &.default {
                    background-color: #ff9e30;
                }
            }
        }
    }
}

.shengyin {
    position: fixed;
    right: 28rpx;
    bottom: 26rpx;
    width: 60rpx;
}

.footers {
    position: fixed;
    left: 50%;
    bottom: 28rpx;
    transform: translate(-50%, 0);
    justify-content: center;

    .liang {
        font-size: 24rpx;
        color: #333333;
        // margin: 0 26rpx;
    }

    .icon {
        justify-content: center;
        padding: 0 26rpx;
    }

    .last,
    .next {
        width: 40rpx;
        height: 40rpx;
    }
}

.wai {
    width: 606rpx;
    height: 378rpx;
    background: #f4eeff;
    border-radius: 64rpx;
    padding: 48rpx 96rpx;
    text-align: center;
    color: #333333;

    .title {
        font-size: 32rpx;
    }

    .label {
        font-size: 28rpx;
        margin: 36rpx 0 56rpx;
    }

    .footer {
        justify-content: space-between;

        .bt {
            width: 184rpx;
            height: 68rpx;
            font-size: 24rpx;
            line-height: 68rpx;
            border-radius: 36rpx;
        }

        .fou {
            color: #9561f3;
            border: 2rpx solid #9561f3;
        }

        .shi {
            background: #9561f3;
            color: #fff;
        }
    }
}
</style>
